<template>
  <div class="buttonBlock">
    <slot name="before"></slot>
    
    <slot name="after"></slot>
  </div>
</template>
<script setup>
import { ref, onActivated, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { exportOrders } from '@/api'
import { formatDate } from '@/plugin/util'
import { throttle } from "@/plugin/currencyFunction";
import { useStore } from "vuex";

const store = useStore();
const props = defineProps(['checkedList', 'getParam', 'tableData']);
const emits = defineEmits(['clickQuery', 'getParam', 'resetSearchCond']);

// 查询
function clickQuery() {
  emits('clickQuery')
  console.log('clickQuery')
}
store.state.updateOrderTableFun.push(clickQuery);

// 导出
function clickExport() {
  let _checkedList = checkData()
  if (_checkedList.length == 0) {
    return;
  }
  
  ElMessageBox.confirm("确定导出已勾选的工单？", "工单导出确认", {
    customClass: "hz-message-box",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      throttle(doExport, 500);
    })
    .catch(e => {
      console.error(e);
    }) 

  function doExport() {
    let codeList = _checkedList.map(val => val.orderNumber);
    let param = {ids: codeList.join(',')};
    exportOrders(param).then(res => {
      console.log(res);
      var eleLink = document.createElement('a');
      eleLink.download = '工单 ' + formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
      eleLink.style.display = 'none';

      // 字符内容转变成blob地址
      let type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; // xlsx
      // type = 'application/vnd.ms-excel' // xls
      const url = window.URL.createObjectURL(new Blob([res], { type: type }))

      eleLink.href = url
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
    })
  }

}

// 检查是否勾选了工单
function checkData() {
  let checkedList = props.checkedList;
  let _checkedList = [];
  if (checkedList && checkedList.length) {
    // 保持查询结果的顺序
    props.tableData.forEach(item1 => {
      let obj = checkedList.find(item2 => item1.orderNumber == item2.orderNumber)
      if (obj) {
        _checkedList.push(obj)
      }
    })
  } else {
    ElMessage({ message: '请先勾选要操作的工单', type: 'warning' });
  }
  return _checkedList;
}

// 重置
function resetSearchCond() {
  emits('resetSearchCond')
}

</script>
<style lang="scss" scoped>
.buttonBlock {
  width: 100%;
  display: flex;
  justify-content: flex-end;

  button {
    margin-bottom: 16px;
  }
}
</style>
